<!-- 正文开始 -->
<div class="layui-fluid" id="pdaPageControl">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar" lay-filter="pdaPageControlSearch">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn btnAddControl"><i class="layui-icon">&#xe654;</i>添加</button>
                        <button class="layui-btn icon-btn btnSave layui-btn-normal"><i class="layui-icon layui-icon-ok"></i>保存</button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="pdaPageControlTable" lay-filter="pdaPageControlTable"></table>

            <div class="layui-form toolbar" lay-filter="pdaPageOptionSearch">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <button class="layui-btn icon-btn btnAddOption"><i class="layui-icon">&#xe654;</i>添加</button>
                    </div>
                </div>
            </div>
            <table class="layui-table" id="pdaPageOptionTable" lay-filter="pdaPageOptionTable"></table>

        </div>
    </div>
</div>
<style>

    #pdaPageControl td[data-field='type'] .layui-table-cell {
        overflow: visible !important;
    }

</style>

<!-- 表格状态列 -->
<script type="text/html" id="tpl-pdaPageControlTable-status">
    <input type="checkbox" lay-filter="tpl-pdaPageControlTable-switch" value="{{d.id}}" lay-skin="switch" lay-text="是|否"
           {{d.status==1 ? 'checked' : ''}}/>
</script>

<!-- 表格只读列 -->
<script type="text/html" id="tpl-pdaPageControlTable-isReadonly">
    <input type="checkbox" lay-filter="tpl-pdaPageControlTable-switch" value="{{d.id}}" lay-skin="switch" lay-text="是|否"
           {{d.readonly==1 ? 'checked' : ''}}/>
</script>

<!-- 表格isRequire列 -->
<script type="text/html" id="tpl-pdaPageControlTable-isRequire">
    <input type="checkbox" lay-filter="tpl-pdaPageControlTable-switch" value="{{d.id}}" lay-skin="switch" lay-text="是|否"
           {{d.isRequire==1 ? 'checked' : ''}}/>
</script>

<!-- 表格isMulti列 -->
<script type="text/html" id="tpl-pdaPageControlTable-isMulti">
    <input type="checkbox" lay-filter="tpl-pdaPageControlTable-switch" value="{{d.id}}" lay-skin="switch" lay-text="是|否"
           {{d.isMulti==1 ? 'checked' : ''}}/>
</script>

<!-- 表格type列 -->
<script type="text/html" id="tpl-pdaPageControlTable-type">
    <select lay-filter="tpl-pdaPageControlTable-select" data-id="{{d.id}}">
        <option value="" {{!d.type ? 'selected':''}}></option>
        <option value="text" {{d.type=='text'?'selected':''}}>text</option>
        <option value="select" {{d.type=='select'?'selected':''}}>select</option>
        <option value="checkbox" {{d.type=='checkbox'?'selected':''}}>checkbox</option>
        <option value="radio" {{d.type=='radio'?'selected':''}}>radio</option>
        <option value="date" {{d.type=='date'?'selected':''}}>date</option>
        <option value="datetime" {{d.type=='datetime'?'selected':''}}>datetime</option>
        <option value="number" {{d.type=='number'?'selected':''}}>number</option>
        <option value="textarea" {{d.type=='textarea'?'selected':''}}>textarea</option>
    </select>
</script>

<!-- 表格操作列 -->
<script type="text/html" id="tpl-pdaPageControlTable-operator">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<script>
    layui.use(['layer', 'table', 'form', 'http', 'tools'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var form = layui.form;
        var http = layui.http;
        var tools = layui.tools;

        var viewId = "#pdaPageControl";
        var $view = $(viewId);
        var pageId = tools.param.pageId;

        //form.render('select','pdaPageControlSearch');

        //渲染control表格
        var fnRender = function(remoteData,pageId) {
            var controlTableIns = table.render({
                id: 'pdaPageControlTable',
                elem: '#pdaPageControlTable',
                //url: http.base_server + 'pdaPageControl/list',
                data: remoteData.controlList,
                //where: {pageId: pageId},
                page: false,
                cellMinWidth: 100,
                height: '360',
                cols: [[
                    {type: 'numbers'},
                    {field: 'id', sort: false, title: 'ID', hide: true},
                    {field: 'title', sort: false, title: '标题', width: 120, edit: 'text'},
                    {field: 'fieldName', sort: false, title: '字段', width: 50, edit: 'text'},
                    {field: 'type', sort: false, title: '类型', width: 100, templet: '#tpl-pdaPageControlTable-type'},
                    {field: 'defaultValue', sort: false, title: '默认值', width: 80, edit: 'text'},
                    {field: 'maxValue', sort: false, title: '最大值', width: 50, edit: 'text'},
                    {field: 'minValue', sort: false, title: '最小值', width: 50, edit: 'text'},
                    {field: 'maxLen', sort: false, title: '最大长度', width: 60, edit: 'text'},
                    {field: 'isRequire', sort: false, itle: '必填', width: 60, templet: '#tpl-pdaPageControlTable-isRequire', align: "center"},
                    {field: 'isReadonly', sort: false, title: '只读', width: 60, templet: '#tpl-pdaPageControlTable-isReadonly', align: "center"},
                    {field: 'isMulti', sort: false, title: '多选', width: 60, templet: '#tpl-pdaPageControlTable-isMulti', align: "center"},
                    {field: 'numPrecision', sort: false, title: '小数点', width: 50, edit: 'text', align: "center"},
                    {field: 'sort', sort: true, title: '排序', width: 50, edit: 'text', align: "center"},
                    {field: 'status', sort: false, templet: '#tpl-pdaPageControlTable-status', title: '状态', width: 60, align: "center"},
                    {align: 'center', toolbar: '#tpl-pdaPageControlTable-operator', title: '操作', width: 80},
                    {field: 'updateTime', sort: false, title: '更新时间'},
                    {field: 'updateByWho', sort: false, title: '更新人'}
                ]],
                error: function (code, msg) {
                    http.fail(code, msg);
                }
            });

            //渲染option表格
            var optionTableIns = table.render({
                id: 'pdaPageOptionTable',
                elem: '#pdaPageOptionTable',
                //url: http.base_server + 'pdaPageOption/list',
                data:remoteData.optionList,
                //where: {pageId: pageId},
                page: false,
                cellMinWidth: 100,
                height: '180',
                cols: [[
                    {type: 'numbers'},
                    {field: 'id', sort: false, title: 'ID', hide: true},
                    {field: 'code', sort: false, title: '编码', width: 200, edit: 'text'},
                    {field: 'name', sort: false, title: '名称', width: 200, edit: 'text'},
                    {field: 'sort', sort: true, title: '排序', width: 50, edit: 'text', align: "center"},
                    {align: 'center', toolbar: '#tpl-pdaPageControlTable-operator', title: '操作', width: 80},
                    {field: 'createTime', sort: false, title: '创建时间'},
                    {field: 'createByWho', sort: false, title: '创建人'},
                    {field: 'updateTime', sort: false, title: '更新时间'},
                    {field: 'updateByWho', sort: false, title: '更新人'}
                ]],
                error: function (code, msg) {
                    http.fail(code, msg);
                },
                done: function () {
                    $view.find("div[lay-id='pdaPageOptionTable'] .layui-table-body tr").addClass("layui-hide");
                }
            });

            // 添加按钮点击事件
            $view.find(".btnAddControl").click(function () {
                var sort = tools.getDataMax(controlTableIns.getCache(), "sort") + 1;
                controlTableIns.addRow({status: 1, pageId: pageId, sort: sort});
            });

            // 工具条点击事件
            table.on('tool(pdaPageControlTable)', function (rowObj) {
                var data = rowObj.data;
                if (rowObj.event === 'edit') { //修改
                } else if (rowObj.event === 'del') { //删除
                    layer.confirm("确定删除该行?", {btn: ["确定", "取消"]},
                        function (index, obj) {
                            layer.closeAll('dialog');
                            rowObj.del();
                        }
                    );
                }
            });

            // switch修改
            form.on('switch(tpl-pdaPageControlTable-switch)', function (obj) {
                var field = obj.othis.parents("td:eq(0)").attr("data-field");
                var idx = obj.othis.parents("tr:eq(0)").attr("data-index");
                var data = {id: obj.elem.value};
                data[field] = obj.elem.checked ? 1 : 0;
                controlTableIns.saveDelta(idx, data);
            });

            var fnOnEdit = function (row, tableIns) {
                row.tr.find("td[data-field='" + row.field + "'] input").val($.trim(row.value));
                if (row.field == 'maxLen' || row.field == 'numPrecision') {
                    if (!!row.value && isNaN(row.value)) {
                        http.failMsg("请输入数字");
                        row.tr.find("td[data-field='" + row.field + "'] input").val("");
                        return;
                    }
                }
                var idx = row.tr.attr("data-index");
                var data = {};
                data.id = row.data.id;
                data[row.field] = row.value;
                tableIns.saveDelta(idx, data);
            };
            table.on('edit(pdaPageControlTable)',function (row) {
                fnOnEdit(row,controlTableIns);
            });
            table.on('edit(pdaPageOptionTable)',function (row) {
                fnOnEdit(row,optionTableIns);
            });

            form.on('select(tpl-pdaPageControlTable-select)', function (obj) {
                var field = obj.othis.parents("td:eq(0)").attr("data-field");
                var idx = obj.othis.parents("tr:eq(0)").attr("data-index");
                var data = {id: obj.elem.getAttribute("data-id")};
                data[field] = obj.value;
                controlTableIns.saveDelta(idx, data);
            });

            $view.find(".btnSave").click(function () {
                var data1 = controlTableIns.getDelta();
                var data2 = optionTableIns.getDelta();
                if ($.isEmptyObject(data1) && $.isEmptyObject(data2)) {
                    return;
                }
                var data = {};
                data.data1 = data1;
                data.data2 = data2;
                http.post('pdaPageControl/saveBatch', JSON.stringify(data), function (res) {
                    if (res.ok) {
                        controlTableIns.updateCache(res.data);
                        controlTableIns.resetDelta();
                        http.okMsg(res.msg);
                    }
                });
            });

            // 添加按钮点击事件
            $view.find(".btnAddOption").click(function () {
                var activeIndex = controlTableIns.getActiveIndex();
                if(typeof activeIndex === 'undefined' || activeIndex === -1){return;}
                var rowData = controlTableIns.getActiveRowData();
                var sort = tools.getSortMax(optionTableIns.getCache()) + 1;
                optionTableIns.addRow({controlId: rowData.id, pageId: pageId, sort: sort});
            });

            table.on("rowIndexChange(pdaPageControlTable)", function (obj) {
                var controlId = obj.data.id;
                optionTableIns.filterRow(function (rowData) {
                    if (!controlId || !rowData || !rowData.controlId) {
                        return false;
                    }
                    if (rowData.controlId === controlId) {
                        return true;
                    }
                })
            })
        };
        http.get('pdaPageControl/listControlAndOption',{pageId:pageId},function (res) {
           if(res.ok){
               fnRender(res.data,pageId);
           }
        });

    });

</script>